<template>
  <div class="TTimePicker">
    <a-time-picker
      v-model="innerValue"
      :open.sync="open"
      v-bind="$attrs"
      popupClassName="TTimePickerPopup"
      v-on="$listeners"
      @change="onChange"
    >
      <div slot="addon" class="flex content-center justify-between">
        <a-button size="small" type="link" @click="setDefaultValue"> 此刻 </a-button>
        <a-button size="small" type="primary" @click="handleClose"> 确定 </a-button>
      </div>
    </a-time-picker>
  </div>
</template>

<script>
import moment from "moment";
import vModelMixin from "@/mixin/v-model";

export default {
  name: "TTimePicker",
  mixins: [vModelMixin],
  data() {
    return {
      currentValue: null,
      open: false,
    };
  },
  methods: {
    onChange(time) {
      this.innerValue = time;
    },
    setDefaultValue() {
      this.innerValue = new moment();
    },
    handleClose() {
      this.open = false;
    },
  },
};
</script>

<style lang="scss">
.TTimePickerPopup {
  .ant-time-picker-panel-input,
  .ant-time-picker-panel-input-wrap {
    max-width: 100%;
  }

  .ant-time-picker-panel-combobox {
    padding: 12px;

    .ant-time-picker-panel-select {
      width: 92px;
      border-left: 0;

      ul {
        width: 80px;

        li {
          height: 32px;
          padding: 0;
          text-align: center;
        }
      }
    }
  }

  li.ant-time-picker-panel-select-option-selected {
    color: #1d7ff2;
    background: #e8f7ff;
    border-radius: 3px;
  }
}
</style>

<style lang="scss" scoped>
.TTimePicker {
  :deep(.ant-time-picker) {
    border: 1px solid #bac3d3;
    border-radius: 4px;
  }
}
</style>
